@charset "UTF-8";
@import url("../common/common.css");
@import url("../common/scrollbar_dark.css");

.main-container {
    width: 100%;
    height: calc(100% - 66px);
    display: flex;

    .table-container {
        flex: 1;
        height: 100%;
        padding: 40px 60px;

        .img-content {
            width: 100%;
            height: 100%;
            background-color: #071b35;
            // border: solid 1px #156a97;
            background-size: 100% 100%;
            position: relative;

            .project-info {
                position: absolute;
                top: 24px;
                left: 48px;
                color: #ffffff;
                font-size: 16px;

                .name {
                    position: relative;

                    &::before {
                        position: absolute;
                        left: -18px;
                        top: 8px;
                        content: "";
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #56a1ff;
                        border-radius: 50%;
                    }
                }

                .alerm {
                    .aidicon {
                        position: relative;
                        top: 3px;
                    }

                    .aidicon-bell-ring {
                        color: #d43737;
                    }

                    .aidicon-bell {
                        color: #03bdc8;
                    }
                }
            }

            .warn-info {
                position: absolute;
                left: 48px;
                top: 100px;
                color: #ffffff;
                font-size: 16px;
                line-height: 24px;
                display: flex;


                .warn-btn {
                    display: inline-block;
                    width: 49px;
                    height: 24px;
                    cursor: pointer;
                    margin-left: 5px;

                    &.open {
                        background: url('/images/equipment/open.png');
                    }

                    &.close {
                        background: url('/images/equipment/close.png');
                    }
                }
            }

            .run-info {
                position: absolute;
                left: 48px;
                top: 140px;
                color: #ffffff;
                font-size: 16px;
                line-height: 24px;
                display: flex;

                .run-btn {
                    display: inline-block;
                    width: 49px;
                    height: 24px;
                    cursor: pointer;
                    margin-left: 5px;

                    &.open {
                        background: url('/images/equipment/open.png');
                    }

                    &.close {
                        background: url('/images/equipment/close.png');
                    }
                }
            }

            .temp-info {
                position: absolute;
                left: 48px;
                top: 180px;
                color: #ffffff;
                font-size: 16px;
                line-height: 24px;
                #editTemp {
                    margin-left: 8px;
                    cursor: pointer;
                }
            }

            .equipment {
                position: absolute;
                cursor: pointer;
                // background-color: rgba($color: #000000, $alpha: 0.5);
            }

            #eq1 {
                top: 22.78%;
                left: 3.41%;
                width: 27.3%;
                height: 30.38%;
            }

            #eq2 {
                top: 33.67%;
                left: 31.34%;
                width: 6.82%;
                height: 12.02%;
            }

            #eq3 {
                top: 26.58%;
                left: 41.29%;
                width: 11.6%;
                height: 17.72%;
            }

            #eq4-1 {
                top: 21.26%;
                left: 60.61%;
                width: 6%;
                height: 14.55%;
            }

            #eq4-2 {
                top: 57.34%;
                left: 21.29%;
                width: 6%;
                height: 14.55%;
            }

            #eq5 {
                top: 13.29%;
                left: 70.78%;
                width: 6%;
                height: 12.02%;
            }

            #eq6-1 {
                top: 4.93%;
                left: 82.25%;
                width: 6.69%;
                height: 13.67%;
            }

            #eq6-2 {
                top: 18.48%;
                left: 88.19%;
                width: 6.69%;
                height: 16.83%;
            }

            #eq7-1 {
                top: 19.36%;
                left: 81.36%;
                width: 4.64%;
                height: 8.35%;
            }

            #eq7-2 {
                top: 35.82%;
                left: 65.53%;
                width: 4.64%;
                height: 9.49%;
            }

            #eq7-3 {
                top: 52.91%;
                left: 73.04%;
                width: 5.39%;
                height: 12.66%;
            }

            #eq8-1 {
                top: 40.25%;
                left: 76.11%;
                width: 5.8%;
                height: 12.66%;
            }

            #eq8-2 {
                top: 72.66%;
                left: 26.62%;
                width: 5.8%;
                height: 14.55%;
            }

            #eq9 {
                top: 44.93%;
                left: 47.57%;
                width: 16.11%;
                height: 20.25%;
            }

            #eq10 {
                top: 65.19%;
                left: 44.64%;
                width: 25.66%;
                height: 17.78%;
            }

            #eq11 {
                top: 51.64%;
                left: 33.17%;
                width: 6.14%;
                height: 15.31%;
            }

            #eq12 {
                top: 69.36%;
                left: 15.36%;
                width: 5.94%;
                height: 13.29%;
            }

            .tips {
                position: absolute;
                cursor: pointer;
                // background-color: rgba($color: #ff0000, $alpha: 0.5);
            }

            #tip1 {
                top: 21.52%;
                left: 57.81%;
                width: 2.05%;
                height: 4.55%;
            }

            #tip2 {
                top: 75.58%;
                left: 51.33%;
                width: 2.5%;
                height: 6.07%;
            }

            .data-content {
                position: absolute;
                right: 0;
                bottom: 0;
                display: flex;

                li {
                    .aidicon {
                        color: #ec9d1f;
                        margin-right: 5px;
                    }

                    color: #c2d1df;
                    font-size: 16px;
                    margin-right: 40px;
                    padding-bottom: 16px;
                }
            }
        }
    }
}

.equipmentDialog {
    &.idlg-outer {
        background-color: #1a2f42;
    }

    .idlg-header {
        background-color: #1a2f42;
        padding: 12px 16px;

        .idlg-title {
            color: #ffffff;
            font-size: 16px;
            font-weight: normal;
        }

    }

    .idlg-main {
        background-color: #12212f;
        padding-top: 20px !important;

        .equipment-wrap {
            width: 100%;
            display: flex;

            .img-wrap {
                width: 400px;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;

                &>img {
                    width: 100%;
                }
            }

            .detail-content {
                width: 454px;
                margin-left: 14px;

                .title-wrap {
                    width: 100%;
                    height: 53px;
                    line-height: 53px;
                    // background-color: rgba($color: #0096ff, $alpha: 0.3);
                    background: url('/images/equipment/eq_title.png');
                    background-size: 100% 100%;
                    color: #c9e5ff;
                    display: flex;
                    margin-bottom: 8px;
                }

                .name {
                    display: inline-block;
                    width: 200px;
                    flex-shrink: 0;
                    padding-left: 30px;
                }

                .key {
                    display: inline-block;
                    width: 100px;
                    flex-shrink: 0;
                    padding-left: 30px;
                }

                .value {
                    display: inline-block;
                    flex: 1;
                    padding-right: 30px;
                    text-align: right;
                }

                .info-list {
                    width: 100%;
                    max-height: 400px;
                    overflow-y: auto;

                    li {
                        width: 100%;
                        height: 39px;
                        line-height: 39px;
                        margin-bottom: 7px;
                        background-color: rgba($color: #0096ff, $alpha: 0.1);
                        color: #ffffff;
                        display: flex;
                    }
                }

                .color-yellow {
                    color: #ffcc00;
                }

                .color-green {
                    color: #00ffba;
                }
            }
        }
    }

    .idlg-footer {
        background-color: #1a2f42;
        margin-top: 20px !important;
        padding-bottom: 3px;
    }
}
.status-green {
    z-index: 2;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: #099c6b;
    background-color: #47dcb2;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset -0.6px -1.9px 4px 0px rgba(21, 139, 100, 0.8);
    -moz-box-shadow: inset -0.6px -1.9px 4px 0px rgba(21, 139, 100, 0.8);
    box-shadow: inset -0.6px -1.9px 4px 0px rgba(21, 139, 100, 0.8);
  }
  .status-green-glow {
    z-index: 1;
    position: absolute;
    background-color: #2f343a;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 0px 8px 1px rgba(21, 139, 100, 0.7);
    -moz-box-shadow: 0px 0px 8px 1px rgba(21, 139, 100, 0.7);
    box-shadow: 0px 0px 8px 1px rgba(21, 139, 100, 0.7);
  }
  .status-yellow {
    z-index: 2;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: #9c9709;
    background-color: #ffe118;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset -0.6px -1.9px 4px 0px rgba(139, 127, 21, 0.8);
    -moz-box-shadow: inset -0.6px -1.9px 4px 0px rgba(139, 127, 21, 0.8);
    box-shadow: inset -0.6px -1.9px 4px 0px rgba(139, 127, 21, 0.8);
  }
  .status-yellow-glow {
    z-index: 1;
    position: absolute;
    background-color: #2f343a;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 0px 8px 1px rgba(139, 127, 21, 0.7);
    -moz-box-shadow: 0px 0px 8px 1px rgba(139, 127, 21, 0.7);
    box-shadow: 0px 0px 8px 1px rgba(139, 127, 21, 0.7);
  }
  .status-red {
    z-index: 2;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: #9c0909;
    background-color: #dc1847;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset -0.6px -1.9px 4px 0px rgba(139, 21, 21, 0.8);
    -moz-box-shadow: inset -0.6px -1.9px 4px 0px rgba(139, 21, 21, 0.8);
    box-shadow: inset -0.6px -1.9px 4px 0px rgba(139, 21, 21, 0.8);
  }
  .status-red-glow {
    z-index: 1;
    position: absolute;
    background-color: #2f343a;
    width: 12px;
    height: 12px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0px 0px 8px 1px rgba(139, 21, 21, 0.7);
    -moz-box-shadow: 0px 0px 8px 1px rgba(139, 21, 21, 0.7);
    box-shadow: 0px 0px 8px 1px rgba(139, 21, 21, 0.7);
  }

